<template>
  <div class="header">
    文件管理系统, {{msg}}
  </div>
  <div class="main">
    <a-button @click="goBack"
              :disabled='backDisable'
              id='goBack'>
      <template #icon>
        <LeftOutlined />
      </template>
    </a-button>
    <span class="path">path: {{url}}</span>
    <a-popconfirm ok-text="Yes"
                  cancel-text="Cancel"
                  @confirm="addFile(name)">
      <template #title>
        <p>New File</p>
        <a-input v-model:value='name'
                 type='text' />
      </template>
      <a-button @click="initName(name)">
        <template #icon>
          <FileAddOutlined />
        </template>
      </a-button>
    </a-popconfirm>
    <span style="padding: 0 5px"></span>
    <a-popconfirm ok-text="Yes"
                  cancel-text="Cancel"
                  @confirm="addDir(name)">
      <template #title>
        <p>New Directory</p>
        <a-input v-model:value='name'
                 type='text' />
      </template>
      <a-button @click="initName(name)">
        <template #icon>
          <FolderAddOutlined />
        </template>
      </a-button>
    </a-popconfirm>
    <a-table :columns="columns"
             :data-source="tableFiles"
             rowKey='id'
             :pagination='false'>
      <template #name={record}>
        <FileTwoTone v-if='record.type!=="dir"'
                     style="fontSize: 26px;" />
        <FolderTwoTone v-else
                       style="fontSize: 26px;" />
        <span v-if='record.type!=="dir"'>{{record.name}}</span>
        <a @click="goChild(record.name)"
           v-else>{{record.name}}</a>
      </template>
      <template #time={text}>
        {{getTime(text)}}
      </template>
      <template #operation={record}
                id='demo'>
        <a-popconfirm ok-text="Yes"
                      cancel-text="Cancel"
                      @confirm="renameFile(record, newName)">
          <template #title>
            <p>Rename File</p>
            <a-input v-model:value='newName'
                     type='text' />
          </template>
          <a-button @click="initOldName(record.name)">
            <template #icon>
              <EditOutlined />
            </template>
          </a-button>
        </a-popconfirm>
        <span style="margin: 0 5px"></span>
        <a-popconfirm title="确认删除？"
                      ok-text="Yes"
                      cancel-text="No"
                      @confirm="deleteFile(record)">
          <a-button>
            <template #icon>
              <DeleteOutlined />
            </template>
          </a-button>
        </a-popconfirm>
      </template>
    </a-table>
  </div>
  <div class="footer"></div>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch } from 'vue'
import files, { addFile, addDir, deleteFile, renameFile } from '../utils/file'
import { url, goBack, goChild } from '../utils/url'
import { getTime } from '../utils/timer'
import {
  LeftOutlined,
  FileAddOutlined,
  FolderAddOutlined,
  FileTwoTone,
  FolderTwoTone,
  DeleteOutlined,
  EditOutlined
} from '@ant-design/icons-vue'
const columns = [
  {
    title: 'FileName',
    dataIndex: 'name',
    key: 'name',
    slots: { type: 'type', customRender: 'name' }
  },
  {
    title: 'LastModified',
    dataIndex: 'time',
    key: 'time',
    slots: { customRender: 'time' }
  },
  {
    title: 'Type',
    dataIndex: 'type',
    key: 'type'
  },
  {
    title: 'Size',
    dataIndex: 'size',
    key: 'size'
  },
  {
    title: 'Operation',
    key: 'operation',
    slots: { customRender: 'operation' },
    width: 150
  }
]
export default defineComponent({
  name: 'Home',
  components: {
    LeftOutlined,
    FileAddOutlined,
    FolderAddOutlined,
    FileTwoTone,
    FolderTwoTone,
    DeleteOutlined,
    EditOutlined
  },
  setup() {
    const backDisable = ref(false)
    watch(url, () => {
      const index = url.value.lastIndexOf('/')
      backDisable.value = index === -1
    })
    const tableFiles = computed(() => {
      return files.filter((item) => {
        return item.path === url.value
      })
    })
    return {
      columns,
      files,
      addDir,
      addFile,
      url,
      goBack,
      goChild,
      backDisable,
      deleteFile,
      renameFile,
      tableFiles,
      getTime
    }
  },
  data() {
    return {
      newName: '',
      name: '',
      msg: ''
    }
  },
  methods: {
    initOldName(name) {
      this.newName = name
    },
    initName() {
      this.name = ''
    }
  },
  mounted() {
    const data = new FormData()
    data.append('name', 'abc')
    this.$axios
      .post('http://localhost:4000/hello', data, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
      .then((res) => {
        console.log(res.data)
        this.msg = res.data.data
      })
      .catch((error) => {
        console.log(error)
      })
  }
})
</script>

<style lang="less">
@import '../assets/css/home.less';
</style>